<template>
  <el-container>
    <el-main>
      <el-row v-for="exhibit in exhibits" :key="exhibit.exId">
        <el-col :span="16">
          <el-card style="margin: 10px" :body-style="{ padding: '0px' }" @click="">
            <div class="content-box">
              <div class="left">
                <img :src="exhibit.exImage"
                     class="image">
              </div>
              <div class="right">
                <div style="font-size: 1.5em">{{ exhibit.exName }}</div>
                <div class="" style="margin-top:10px; text-align: left" v-html="exhibit.exDetail"></div>

              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card style="margin-top: 10px">
            <el-row style="margin-top: 20px">
              <el-col :span="12">
                <el-tag type="success" style="margin: 5px">开始时间：{{ exhibit.exStart }}</el-tag>
              </el-col>
              <el-col :span="12">
                <el-tag type="danger" style="margin: 5px">结束时间：{{ exhibit.exEnd }}</el-tag>
              </el-col>
            </el-row>
            <el-row style="margin-top: 105px">
              <el-button type="success" style="margin: 5px" size="small" @click="booking(exhibit.exId)"><i
                  class="el-icon-s-ticket"></i> 预约
              </el-button>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
import {allExhibits} from "@/api/request";

export default {
  data() {
    return {
      exhibits: [
        {
          exId: 1,
          exName: '',
          exDetail: '',
          exImage: '',
          exStart: '',
          exEnd: ''
        }
      ],
    };
  },
  methods: {
    getAllExhibits() {
      allExhibits().then(
          res => {
            if (res.data.code === 1) {
              this.exhibits = res.data.data
            }
          }
      )

    },
    booking(param) {
      this.$router.push({path: '/booking', query: {exId: param}});
    }
  },
  mounted() {
    this.getAllExhibits()
  }
}
</script>

<style>
.content-box {
  height: 250px;
  display: flex;
}

.left {
  display: block;
  width: 40%;
}

.right {
  flex: 1;
  width: 60%;
  position: relative;
}

.bottom {
  bottom: 0;
  position: absolute;
  left: 30%;
  margin: 10px;
}

.image {
  width: 100%;
  display: block;
}
</style>
